<template>
  <div class="home">
    home
    <button @click="add">改变state</button>
    <p>{{this.$store.state.num}}</p>
    <p>{{storeNum}}</p>
    <p>
      <router-link to="/city"><button>{{City}}</button></router-link>
    </p>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      
    }
  },
  methods: {
    add(){
      this.$store.dispatch("addNum")
    }
  },
  mounted() {
    // console.log(this.$store.state.num);
  },
  computed:{
    storeNum(){
      return this.$store.state.num
    },
    City(){
      return this.$store.state.city
    }
  },
  // beforeCreate(){
  //   console.log("beforeCreate");
  // },
  // created(){
  //   console.log("created");
  // },
  // beforeMount(){
  //   console.log("beforeMount");
  // },
  // beforeDestroy(){
  //   console.log("beforeDestroy");
  // },
  // destroyed() {
  //   console.log("destroyed");
  // },
  // activated() {
  //   console.log("activated");
  // },
  // deactivated() {
  //   console.log("deactivated");
  // },
  beforeRouteEnter (to, from, next) {
    console.log(to);
    console.log(from);
    next();
  }
}
</script>
